<template>
	<view class="container">
		<view class="address-info-container" v-if="addressList.length > 0">
			<view class="address-info" v-for="(item, index) in addressList" :key="index">
				<view class="address-info-header">
					<text class="address-info-header-name">{{ item.userName }}</text>
					<text>{{ item.telNumber }}</text>
				</view>
				<view class="address-info-detail">{{ item.provinceName + item.cityName + item.districtName + item.detailInfo }}</view>
				<view class="address-info-bottom">
					<view>
						<!-- <radio-group @change="radioChange(item)" style="display: flex;align-items: center;">
							<radio value="true" :checked="item.isDefault" style="transform:scale(0.9)" />
							<text style="margin-left: 10rpx; font-size: 28rpx;">设为默认</text>
						</radio-group> -->
					</view>
					<view @click="clickEdit(item.id)" style="display: flex;align-items: center;margin-left: auto;margin-right: 40rpx;">
						<image class="edit-icon-edit" src="../../../static/images/edit.png"></image>
					</view>
					<view @click="clickDelete(item.id)" style="display: flex;align-items: center;">
						<image class="edit-icon-delete" src="../../../static/images/delete@3x.png"></image>
					</view>
				</view>
			</view>
		</view>
		<empty v-else class="no-content"></empty>
		<view class="bottom-opreation-container"><view class="add-address bottom-change-view" @click="addAddress">新建地址</view></view>
	</view>
</template>

<script>
import { successToShow, errorToShow, debounce } from '@/config/common.js';
import { getAppAddressList, deleteAppAddress, setDefaultAddress ,addressList,editAppAddress} from '@/constant/customer.js';
export default {
	data() {
		return {
			addressList: [],
			query_filter: {
				customerId: uni.getStorageSync('customerId'),
				pageNum: 0,
				pageSize: 10
			}
		};
	},
	onShow() {
		this.searchAddressList();
	},
	onReachBottom() {
		this.query_filter.pageNum++;
		this.searchAddressList();
	},
	onPullDownRefresh() {
		this.initData();
	},
	methods: {
		initData(){
			this.query_filter.pageNum = 0;
			this.addressList=[]
			this.searchAddressList();
		},
		addAddress() {
			uni.navigateTo({
				url: './add-address/add-address?addressId='
			});
		},
		clickEdit(addressId) {
			uni.navigateTo({
				url: './add-address/add-address?addressId=' + addressId
			});
		},
		radioChange(select_item) {
			debounce(() => {
				this.imp_radioChange(select_item);
			}, 500)();
		},
		async imp_radioChange(item) {
			await editAppAddress({
				...item,
				isDefault:1
			});
			successToShow('设置成功', res => {
				
			});
		},
		async searchAddressList() {
			let res = await addressList(this.query_filter);
			uni.stopPullDownRefresh();
			if (this.query_filter.pageIndex > 0) {
				for (let i = 0; i < res.rows.length; i++) {
					let obj = res.rows[i];
					this.addressList.push(obj);
				}
			} else {
				this.addressList = res.rows;
			}
		},
		clickDelete(addressId) {
			let that = this;
			uni.showModal({
				title: '',
				content: '确定删除吗',
				success: function(res) {
					if (res.confirm) {
						that.deleteAddress(addressId);
					}
				}
			});
		},
		async deleteAddress(addressId) {
			await deleteAppAddress([addressId]);
			successToShow('删除成功', res => {
				this.initData(this.query_filter);
			});
		}
	}
};
</script>
<style>
@import url('../../../css/common.css');
</style>
<style scoped lang="scss">
.container {
	background-color: $main-page-color;
	height: 100vh;
	overflow-y: auto;
}

.address-info-container {
	display: flex;
	flex-direction: column;
	padding-left: 30rpx;
	padding-right: 30rpx;
	margin-top: 20rpx;
	padding-bottom: 120rpx;
	.address-info {
		min-height: 120rpx;
		font-size: 28rpx;
		font-family: 'SourceHanSansCN-Regular';
		color: $main-text-color-grey;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		&-header {
			font-weight: bold;
			margin-bottom: 30rpx;
			margin-left: 40rpx;
			margin-top: 40rpx;
			&-name {
				font-family: 'SourceHanSansCN-Medium';
				color: $main-text-color-gray-33;
				margin-right: 20rpx;
				font-size: $main-text-size-32;
			}
		}

		&-detail {
			margin-left: 40rpx;
			margin-bottom: 30rpx;
		}

		&-bottom {
			display: flex;
			align-items: center;
			padding: 28rpx 40rpx;
			border-top: 2rpx solid $main-line-color-gray-F5;
			color: $main-text-color-gray-33;
			font-size: $main-text-size-28;
			.edit-icon-edit {
				width: 32rpx;
				height: 32rpx;
			}
			.edit-icon-delete {
				width: 32rpx;
				height: 36rpx;
			}
		}
	}
}

.no-content {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100%;
}

.bottom-opreation-container {
	padding-bottom: 20rpx;
	padding-top: 20rpx;
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	width: 100%;
	display: flex;
	justify-content: center;
}

.add-address {
	width: 670rpx;
	height: 80rpx;
	border-radius: 40rpx;
	background-color: $main-theme-color-green;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
